<template>
  <div class="my-fitment">
    <div
      class="fitment-top"
      @click="currentConstruction.length !== 1 ? openDialog() : ''"
    >
      <uni-icons type="xiangmu" size="36" custom-prefix="iconfont" />
      <div class="text">{{ currentTitle }}</div>
      <uni-icons type="jiantou" size="24" custom-prefix="iconfont" />
    </div>
    <div class="process">
      <div v-for="(item, index) in processList" :key="index">
        <uni-icons
          v-if="index !== 0"
          :key="index"
          type="xiayibu"
          custom-prefix="iconfont"
          color="#dbdbdb"
          size="24"
        />
        <uni-icons
          :key="item.icon"
          class="icon"
          :type="item.icon"
          :label="item.label"
          custom-prefix="iconfont"
          label-pos="bottom"
          :color="colorMap[item.status]"
          :label-color="colorMap[item.status]"
        />
      </div>
    </div>
    <div class="menu">
      <div
        v-for="(cols, index) in menuList"
        :key="index"
        :class="{ 'u-border-top': index !== 0 }"
      >
        <uni-row :gutter="80">
          <uni-col v-for="item in cols" :key="item.icon" :span="3">
            <uni-icons
              class="icon"
              :name="`https://img-cdn.rsm-lab.com/mlab/mlab-fitment/image/${item.icon}.png`"
              :label="item.label"
              width="88"
              label-pos="bottom"
              label-color="#111111"
              margin-top="12"
              label-size="24"
              @click="jumpTo(item)"
            />
          </uni-col>
        </uni-row>
      </div>
    </div>
    <uni-popup v-model="topShow" mode="bottom" length="65%">
      <div class="content-list">
        <div class="tittle">选择项目</div>
        <uni-list scroll-y="true" style="height: 500rpx" class="scroll">
          <uni-list-item
            v-for="(item, index) in currentConstruction"
            :key="index"
            :title="item.itemName"
            title-style="{'width':'200rpx';'border':'1rpx solid black'}"
            :arrow="false"
            :class="item.itemName == current ? 'cell-title-active' : 'cell-title'"
            @click="seeAll(item)"
          >
            <uni-icons
              type="xuanzhong"
              size="24"
              custom-prefix="iconfont"
              :color="item.itemName == current ? 'cell-title-active' : 'cell-title' "
            />
          </uni-list-item>
        </uni-list>
      </div>
      <uni-row :gutter="30" justify="space-between" class="btnBox">
        <uni-col :span="5">
          <button
            hover-class="none"
            :hair-line="false"
            :custom-style="{ background: '#F0F0F0', color: '#333' }"
            class="reset"
            type="info"
            @click="reset()"
          >取消</button>
        </uni-col>
        <uni-col :span="5">
          <button
            class="surebtn"
            hover-class="none"
            type="primary"
            @click="confirmFilter"
          >确定</button>
        </uni-col>
      </uni-row>
    </uni-popup>
    <Login
      @getStoreAfter="getConstructionData"
    />
    <FloatLayer />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, toRaw } from 'vue';

const currentConstruction = ref(null);
</script>

<style lang="scss" scoped>
.my-fitment {
  min-height: 100vh;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  .fitment-top {
    // border-top: 1px solid rgba(0, 0, 0, 0.1);
    width: 375px;
    height: 44px;
    background: #ffffff;
    line-height: 44px;
    color: #46bad1;
    padding:0 10px;
    display: flex;
    .text {
      max-width: 320px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      padding: 0 4px;
      margin-right: 10px;
      overflow: hidden; //超出一行文字自动隐藏
      text-overflow: ellipsis; //文字隐藏后添加省略号
      white-space: nowrap; //强制不换行
      display: inline-block;
    }
  }
}
.process {
  display: flex;
  height: 84px;
  min-height: 84px;
  background: white;
  padding: 0 30px;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  .icon {
    font-size: 24px;
  }
  ::v-deep .u-icon__label {
    font-size: 12px !important;
  }
}
.icon {
  ::v-deep.u-icon__label {
    margin-top: 6px !important;
  }
}
.menu {
  background: white;
  margin-top: 10px;
  flex: 1;
  padding: 0 9px;
  .icon {
    margin: 20px 0;
    ::v-deep.u-icon__label {
      margin-top: 9px !important;
    }
  }
}
.u-border-top:after {
  width: 335px !important;
  margin-left: 50%;
  transform: translateX(-50%);
}

.u-border-top:after {
  border-top-color: #eeeeee !important;
  border-top-width: 1rpx !important;
}

.content-list {
  background: #fefefe;
  padding: 0 20px;
  margin-bottom: 20px;
  .tittle {
    position: sticky;
    top: 0;
    z-index: 9;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 400;
    color: #111111;
    line-height: 25px;
    text-align: center;
    margin: 20px;
    position: relative;
    &::after {
      position: absolute;
      content: "";
      bottom: -20px;
      left: 0;
      width: 335px !important;
      margin-left: 50%;
      transform: translateX(-50%);
      border-bottom: 1px solid rgb(228, 231, 237);
    }
  }
  .cell-title {
    ::v-deep .u-cell_title{
      // color:red !important;
      // border: 1px solid black !important;
      width: 90% !important;
    }
     ::v-deep .u-icon__icon {
      color: transparent !important;
    }
  }
  .cell-title-active {
    ::v-deep .u-cell_title {
      color: #46bad1 !important;
      width: 90% !important;
    }
    ::v-deep .u-icon__icon {
      color: #46bad1 !important;
    }
  }
  .time {
    line-height: 54px;
  }
  ::v-deep .u-cell {
    padding: 14px 0px !important;
    color: #111111;
  }
  ::v-deep .u-cell__value {
    text-align: right !important;
    color: #111111 !important;
    font-size: 14px;
  }
}
.btnBox {
  ::v-deep .u-row {
    // border:1px solid  red;
    margin: 10px 10px 10px 10px;
  }
  ::v-deep .u-col {
    padding: unset !important;
    margin-left: 11px !important;
    width: 162px;
    height: 48px;
    background: #f0f0f0;
    border-radius: 4px;
  }
  ::v-deep .u-size-default {
    height: 48px;
    line-height: 48px;
  }
}

.scroll {
  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    background: transparent;
  }
}
</style>
